<template>
	<view class="">
		<view class="dev-ruler-all"
			:style="{'background':background,'border': `1rpx solid ${borderColor}`,'border-radius':`${radius}rpx`}">
			<scroll-view :scroll-with-animation="scrollWithAnimation" @scroll="scroll" :scroll-anchoring="true"
				class="dev-ruler-box" scroll-x="true" :scroll-left="scrollLeft">
				<view class="weigh-both-sides"
					:style="{'width':width=='100%'?'50%':`${width/2}rpx`,'height':`${height}rpx`}"></view>
				<list v-if="listNum" :class="index%[quarterInterval] ==0?'dev-scale-height':'dev-scale'"
					v-for="(item,index) in list" :key="index"
					:style="{'width':`${index==activateIndex?activeScaleThickness:scaleThickness}px`,'margin-right':`${scaleInterval}px`,
					'background':index==activateIndex || index==activateIndex-1 || index==activateIndex+1?activeColor:inactiveColor,'height':`${index==activateIndex?activeScaleHeight:inactiveScaleHeight}rpx`}">
					<view class="dev-degree-of-engraving"
						:style="{'width':`${quarterInterval*scaleThickness+scaleInterval*quarterInterval}px`,
						'left':`-${(quarterInterval*scaleThickness+scaleInterval*quarterInterval)/2}px`,'font-size':`${fontSize}rpx`,'color':index==activateIndex?activateTextColor:inactiveTextColor}"
						v-show="index%[quarterInterval] ==0">
						{{item.number}}
						<!-- {{decimal?(index*scaleValue*Math.pow(0.1, decimal)+minNum).toFixed(decimal):(index+minNum)*scaleValue}} -->
					</view>
				</list>
				<view class="weigh-both-sides"
					:style="{'width':width=='100%'?'50%':`${width/2}rpx`,'height':`${height}rpx`}"></view>
			</scroll-view>
			<!-- 两边留白 -->
			<view class="dev-left-blank"
				:style="{'width':`${bothSidesWidth}rpx`,'height':`${height+10}rpx`,'background':bothSidesColor}"></view>
			<view class="dev-right-blank"
				:style="{'width':`${bothSidesWidth}rpx`,'height':`${height+10}rpx`,'background':bothSidesColor}"></view>
			<view class="dev-left-blank" v-if="disable"
				:style="{'width':width=='100%'?'100%':`${width}rpx`,'height':`${height+10}rpx`}" @touchstart="start">
			</view>
		</view>

	</view>

</template>

<script>
	/******************************************* 娄渊洋
	 * 刻度尺
	 * @property {String,Number} 'width' 刻度尺宽度 默认宽度为'100%'
	 * @property {String,Number} 'height' 刻度尺高度 默认高度为90rpx
	 * @property {String} 'background' 刻度尺背景颜色
	 * @property {String,Number} 'radius' 刻度尺边框圆角
	 * @property {String,Number} 'both-sides-width' 刻度尺两边遮盖刻度的盒子宽度
	 * @property {String} 'both-sides-color' 刻度尺两边遮盖刻度的盒子颜色
	 * @property {Number} 'min-num' 刻度尺最小值
	 * @property {Number} 'max-num' 刻度尺最大值
	 * @property {Number} 'initial-value' 刻度尺初始值
	 * @property {Number} 'decimal' 刻度尺显示几位小数，0不显示，1一位小数，2两位小数 依次类推
	 * @property {Number} 'quarter-interval' 刻度数间隔几个刻度尺显示，默认10个
	 * @property {Number} 'active-scale-thickness' 激活的刻度线粗细 默认2px
	 * @property {Number} 'scale-thickness' 未激活刻度线粗细 默认2px
	 * @property {String,Number} 'active-scale-height' 激活刻度线高度
	 * @property {String,Number} 'inactive-scale-height' 未激活刻度线高度
	 * @property {Number} 'scale-interval' 刻度线之间的距离 默认10px
	 * @property {String,Number} 'font-size' 刻度值文字号大小
	 * @property {String} 'activate-text-color' 激活的刻度值文本颜色
	 * @property {String} 'inactive-text-color' 未激活的刻度值文本颜色
	 * @property {String} 'active-color' 激活的刻度线颜色
	 * @property {String} 'inactive-color' 未激活的刻度线颜色
	 * @property {Number} 'rolling-speed' 刻度尺滑动速度，值越大滑动越慢，最小值为1
	 * @property {Number} 'scale-value' 刻度线每格代表的值，默认刻度值为1；当为1位小数时刻度值为0.1；2位小数时刻度值为0.01依次类推
	 */
	export default {
		name: 'dev-ruler', //刻度尺
		props: {
			//宽度
			width: {
				type: [String, Number],
				default: '100%', //rpx
			},
			// 高度
			height: {
				type: [String, Number],
				default: 90, //rpx
			},
			//是否禁止选择
			disable: {
				type: Boolean,
				default: false
			},
			//背景颜色
			background: {
				type: String,
				default: '#FFFFFF', //rpx
			},
			//边框颜色
			borderColor: {
				type: String,
				default: '#979797', //rpx
			},
			//边框圆角
			radius: {
				type: [String, Number],
				default: 90, //rpx
			},
			//两边留白
			bothSidesWidth: {
				type: [String, Number],
				default: 40, //rpx
			},
			//两边留白颜色
			bothSidesColor: {
				type: String,
				default: '#fff',
			},
			//最小值
			minNum: {
				type: Number,
				default: 0
			},
			//最大值
			maxNum: {
				type: Number,
				default: 100
			},
            //当前尺子的标示
            itemCode:{
                type: String,
                default: '',
            },
			//初始值
			initialValue: {
				type: Number,
				default: 0
			},
			//显示几位小数
			decimal: {
				type: Number,
				default: 0 //0默认不显示小数
			},
			//刻数间隔几个显示
			quarterInterval: {
				type: Number,
				default: 10,
			},
			//激活的刻度粗细
			activeScaleThickness: {
				type: Number,
				default: 1, //px
			},
			// 刻度粗细
			scaleThickness: {
				type: Number,
				default: 1, //px
			},
			//激活刻度高度
			activeScaleHeight: {
				type: [String, Number],
				default: 40, //rpx
			},
			//未激活刻度高度
			inactiveScaleHeight: {
				type: [String, Number],
				default: 30, //rpx
			},
			//刻度之间距离
			scaleInterval: {
				type: Number,
				default: 5, //px
			},
			//刻度数字大小
			fontSize: {
				type: [String, Number],
				default: 22, //rpx
			},
			//激活文字颜色
			activateTextColor: {
				type: String,
				default: '#2EA7E0',
			},
			//未激活文字颜色
			inactiveTextColor: {
				type: String,
				default: '#000000',
			},
			//激活的刻度颜色
			activeColor: {
				type: String,
				default: '#2EA7E0',
			},
			//未激活的刻度颜色
			inactiveColor: {
				type: String,
				default: '#E2E1E2',
			},
			//滚动速度
			rollingSpeed: {
				type: Number,
				default: 5, // 数值越小滚动越快，最小值为1
			},
			//刻度值
			scaleValue: {
				type: Number,
				default: 1, // 默认刻度值为1 当为1位小数时刻度值为0.1；2位小数时刻度值为0.01依次类推
			},
			//设置滚动条初始值是否显示动画
			scrollWithAnimation: {
				type: Boolean,
				default: true
			}

		},
		data() {
			return {
				list: [],
				listNum: 0, //尺子循环次数
				currentValue: this.initialValue,
				scrollLeft: 0,
				activateIndex: 0,
				loadOnce: false, //是否加载完一次
				scaleWidth: this.scaleThickness + this.scaleInterval, //尺寸一个刻度的宽度（刻度线宽度+刻度间隔宽度）
				startData: {
					clientX: '',
					clientY: '',
				},

			}
		},
		computed: {
			//尺子间隔宽度
			getScaleWidth() {
				this.scaleWidth = this.scaleThickness + this.scaleInterval;
			},
			//计算循环次数
			numberOfCycles() {
				if (this.decimal) {
					let quantity = this.listNum = (((this.maxNum - this.minNum) * Math.pow(10, this.decimal)) / this
							.scaleValue)
						.toFixed(this.decimal) * 1 + 1
					// return
					// return this.listNum = (((this.maxNum - this.minNum) * Math.pow(10, this.decimal)) / this.scaleValue)
					// 	.toFixed(this
					// 		.decimal) * 1 + 1
					for (let i = 0; i < quantity; i++) {
						this.list.push({
							number: (i * this.scaleValue * Math.pow(0.1, this.decimal) + this.minNum).toFixed(this
								.decimal)
						})
					}

				} else {

					let quantity = this.listNum = (this.maxNum - this.minNum) / this.scaleValue + 1

					for (let i = 0; i < quantity; i++) {
						this.list.push({
							number: (i + this.minNum) * this.scaleValue
						})
					}

					// (index+minNum)*scaleValue

					// return this.listNum = (this.maxNum - this.minNum) / this.scaleValue + 1
				}
			},
			//初次计算尺子位置
			getScrollLeft() {
				if (this.loadOnce) return
				this.loadOnce = true;
				if (this.decimal) {
					if (this.initialValue < this.minNum) {
						this.scrollLeft = 0;
						this.activateIndex = 0;
						this.currentValue = this.minNum;
						this.$emit('input', 0)
					} else if (this.initialValue > this.maxNum) {
						this.scrollLeft = ((this.maxNum - this.minNum) * Math.pow(10, this.decimal) / this.scaleValue)
							.toFixed() * this.scaleWidth;
						this.activateIndex = this.maxNum - this.minNum;
						this.currentValue = this.maxNum;
						this.$emit('input', this.currentValue)
					} else {
						this.scrollLeft = ((this.initialValue - this.minNum) * Math.pow(10, this.decimal) / this
							.scaleValue).toFixed() * this.scaleWidth;
						this.activateIndex = ((this.initialValue - this.minNum) * Math.pow(10, this.decimal) / this
							.scaleValue).toFixed() * 1
						this.$emit('input', this.initialValue)
					}
				} else {
					if (this.initialValue < this.minNum) {
						this.scrollLeft = 0;
						this.activateIndex = 0;
						this.currentValue = this.minNum;
						this.$emit('input', 0)
					} else if (this.initialValue > this.maxNum) {
						this.scrollLeft = ((this.maxNum - this.minNum) * this.scaleWidth) / this.scaleValue;
						this.activateIndex = (this.maxNum - this.minNum) / this.scaleValue;
						this.currentValue = this.maxNum;
						this.$emit('input', this.currentValue)
					} else {
						this.scrollLeft = ((this.initialValue - this.minNum) * this.scaleWidth) / this.scaleValue;
						this.activateIndex = (this.initialValue - this.minNum) / this.scaleValue;
						this.$emit('input', this.initialValue)
					}
				}
			}
		},
		methods: {
            
			scroll(e) {
                if(this.itemCode){
                   let data =  this.itemCode.split("-");
                   let d;
                   let h;
                   if(data[0]=='收缩压'){
                       h = data[1]
                       uni.setStorageSync('h', data[1]);
                   }
                   if(data[0] == '舒张压'){
                        uni.setStorageSync('d', data[1]);
                   }
                   d = uni.getStorageSync('d')
                   h = uni.getStorageSync('h')
                   if(parseInt(d) > parseInt(h)){
                       uni.showToast({
                       	title: '舒张压不能大于收缩压',
                       	icon:'none',
                       	duration: 2000
                       });
                   }
            
                }
               
				let indexs = Math.round(e.detail.scrollLeft / (this.scaleThickness + this.scaleInterval));
				if (indexs < 0) {
					indexs = 0;
				} else if (indexs >= this.listNum) {
					indexs = this.listNum - 1;
				}
                
				if (this.activateIndex === indexs) return
				this.activateIndex = indexs;
				this.$emit('input', this.list[this.activateIndex].number)
			},

			//@touchstart 触摸开始
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
			},
			//@touchmove触摸移动
			move(event) {
                console.info(event,"event---->")
				let _this = this;
				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
				let data = touch.clientX - this.startData.clientX;
				//向左移动 加数字
				if (touch.clientX < this.startData.clientX) {
					if (data < `-${this.rollingSpeed}` && this.activateIndex < this.listNum - 1) {
						this.startData.clientX = touch.clientX;
						this.scrollLeft = this.scrollLeft + this.scaleWidth;
						this.activateIndex = this.activateIndex + 1;
						if (this.decimal) {
							this.currentValue = (this.currentValue + this.scaleValue * Math.pow(0.1, this.decimal))
								.toFixed(this.decimal) * 1
							this.$emit('input', this.currentValue)
						} else {
							this.currentValue = this.currentValue + this.scaleValue
							this.$emit('input', this.currentValue)
						}
					}
				}
				//向右移动 减数字
				if (touch.clientX > this.startData.clientX && this.activateIndex > 0) {
					this.isLeft = false;
					if (data > this.rollingSpeed) {
						this.startData.clientX = touch.clientX;
						this.scrollLeft = this.scrollLeft - this.scaleWidth;
						this.activateIndex = this.activateIndex - 1;
						if (this.decimal) {
							this.currentValue = (this.currentValue - this.scaleValue * Math.pow(0.1, this.decimal))
								.toFixed(this.decimal) * 1
							this.$emit('input', this.currentValue)
						} else {
							this.currentValue = this.currentValue - this.scaleValue
							this.$emit('input', this.currentValue)
						}
					}
				}
			},
		}

	}
</script>

<style lang="scss">
	.dev-ruler-all {
		overflow: hidden;
		position: relative;
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-mask-image: -webkit-radial-gradient(white, black);

		.dev-left-blank {
			position: absolute;
			top: 0;
			left: 0;
		}

		.dev-right-blank {
			position: absolute;
			top: 0;
			right: 0;
		}
	}


	.dev-ruler-box {
		white-space: nowrap;

		.weigh-both-sides {
			display: inline-block;
		}

		.dev-scale {
			display: inline-block;
			position: relative;

			.dev-degree-of-engraving {
				position: absolute;
				text-align: center;
			}
		}

		.dev-scale-height {
			display: inline-block;
			position: relative;

			.dev-degree-of-engraving {
				text-align: center;
				position: absolute;
				top: -40rpx;
			}
		}

	}


	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	.dev-ruler-box ::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	/* #endif */


	/* #ifndef APP-NVUE */
	::-webkit-scrollbar,
	::-webkit-scrollbar,
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	/* #endif */
</style>
